<template>
    <view class="bg-white h-[120rpx] w-full flex flex-row justify-between items-center  ">
        <view class="w-[200rpx] text-primary font-bold text-center" @click="handleSeachAll">
            <text class="">全部商户</text>
        </view>
        <view class="w-full pr-3 ">
            <uni-easyinput v-model="searchParams.name" class="rounded-full" focus placeholder="请输商户名称"
                borderColor="#efefef" style=" height: '150px';min-height:'150rpx' " suffixIcon="search"
                @iconClick="handleSearch"></uni-easyinput>
        </view>

    </view>
    <view class="z-50">
        <block v-for="(item, index) in merchantList" :key="index">
            <uni-card :title="item.name" @click="">
                <view class="border-b py-2 flex justify-between">
                    <view>
                        <text class="font-bold w-[150rpx]">地址</text>
                    </view>
                    <view>
                        <text>{{ item.address }}</text>
                    </view>
                </view>
                <view class="border-b py-2 flex justify-between">
                    <view>
                        <text class="font-bold w-[150rpx]">联系人</text>
                    </view>
                    <view>
                        <text>{{ item.contactName }}</text>
                    </view>
                </view>
                <view class="border-b py-2 flex justify-between">
                    <view>
                        <text class="font-bold w-[150rpx]">联系电话</text>
                    </view>
                    <view>
                        <text>{{ item.contactPhone }}</text>
                    </view>
                </view>
                <!-- <view class="border-b py-2 flex justify-between">
                    <view>
                        <text class="font-bold w-[150rpx]">归属业务员</text>
                    </view>
                    <view>
                        <text>{{ item.salesman }}</text>
                    </view>
                </view>
                <view class="border-b py-2 flex justify-between">
                    <view>
                        <text class="font-bold w-[150rpx]">抽奖活动</text>
                    </view>
                    <view>
                        <text>5次</text>
                    </view>
                </view> -->
            </uni-card>

        </block>

    </view>
    <view class="fixed bottom-[150rpx] left-[20rpx]  " @click="handleOpenEdit">
        <view class="w-[100rpx] h-[100rpx] bg-primary rounded-full flex items-center justify-center">
            <uni-icons type="plusempty" color="#fff" size="30" />
        </view>
    </view>
    <edit-vue ref="editRef" @load-merchant-lists=loadMerchantList></edit-vue>
</template>
<script lang="ts" setup>
import { merchantListsApi } from '@/api/lucky'
import editVue from './edit.vue'
const editRef = shallowRef<InstanceType<typeof editVue>>()
const searchParams = ref<Record<string, any>>({
    name: '',
    pageNum: 1,
    pageSize: 10
})
const handleSeachAll = () => {
    searchParams.value = {
        name: '',
        pageNum: 1,
        pageSize: 10
    }
    loadMerchantList()
}
const handleOpenEdit = () => {
    editRef.value?.open()
}
const merchantList = ref<any[]>([])
const loadMerchantList = async () => {
    const data = await merchantListsApi(searchParams.value)
    merchantList.value = data.lists
}
const handleSearch = (e: any) => {
    console.log("handleSearch", e)
    if (e === "suffix") {
        loadMerchantList()
    }
}
onLoad(() => {
    loadMerchantList()
})
</script>
<style lang="scss" scoped>
::v-deep .uni-easyinput__content {
    border-radius: 40rpx;
}
</style>